<!--全民经纪人邀请-->
<template>
  <div class="main section clearfix">
    <el-form
      :model="query"
      ref="query"
      style="text-align: left"
      label-width="90px"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="关键词" prop="keyWord">
            <el-input
              v-model="query.keyWord"
              placeholder="用户姓名、身份证号、电话等"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="是否加入" prop="joinState">
            <el-select v-model="query.joinState" placeholder="是否加入">
              <el-option
                v-for="item in joinStateData"
                :key="item.value"
                :label="item.itemText"
                :value="item.itemValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="button">
            <el-button type="primary" @click="queryFun">搜索</el-button>
            <el-button type="danger" @click="emptyFun">清空</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form>
      <el-form-item style="text-align: left" class="button">
        <el-button
          @click="exportDept"
          type="primary"
          size="small"
          v-if="userInfoExport"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="AgentInviteList" border stripe style="width: 100%">
      <el-table-column prop="phoneNumber" label="被邀请手机号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="idCard"
        label="身份证号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="email"
        label="邮箱"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="inviteTime"
        label="邀请时间"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="joinState"
        label="是否加入"
        :formatter="joinStateTranslation"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="agreeTime"
        label="同意时间"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <!-- <el-button type="text" size="small" @click="editFun(scope.row)"
            >修改</el-button
          > -->
          <el-popconfirm
            title="确定删除此数据吗？"
            @onConfirm="delFun(scope.$index, scope.row)"
          >
            <el-button
              slot="reference"
              type="text"
              size="small"
              style="color: #fb575e"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页控件 -->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        :page-size="query.pagesize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getAgentInvite,
  getEmployee,
  delAgentInvite,
} from "../../assets/js/api";
import { expotOut } from "../../assets/js/utlis";
import { checkPermiss } from "../../assets/js/utlis";

export default {
  name: "Achievement",
  data() {
    return {
      total: 10,
      pages: 0,
      formInline: {},
      newjobState: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      query: {
        pageNo: 1,
        pagesize: 10,
        joinState: null,
        keyWord: null,
      },
      joinStateData: [],
      AgentInviteList: [],
      golbalPermissions: [],
    };
  },
  computed: {
    userInfoExport: function () {
      return checkPermiss("sys:agentInvite:exportUser", this.golbalPermissions);
    },
  },
  watch: {
    total: {
      handler() {
        if (
          this.total == (this.query.pageNo - 1) * this.query.pagesize &&
          this.total != 0
        ) {
          this.query.pageNo -= 1;
          this.getList(this.query); //获取列表数据
        }
      },
    },
  },
  created() {
    this.getList();
    this.joinState();
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
  },
  methods: {
    getList() {
      getAgentInvite(this.query).then((res) => {
        this.AgentInviteList = res.data.records;
        this.query.pagesize = res.data.size;
        this.query.pageNo = res.data.current;
        this.total = res.data.total;
        this.pages = res.data.pages;
      });
    },
    // 是否状态
    joinState() {
      getEmployee("whether_state").then((res) => {
        this.joinStateData = res.data;
      });
    },
    // 是否状态翻译
    joinStateTranslation(row) {
      return this.selectDictLabel(this.joinStateData, row.joinState);
    },
    // 删除
    delFun(index, obj) {
      delAgentInvite(obj.id).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.getList(this.query);
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
          this.getList(this.query);
        }
      });
    },

    // 搜索按钮
    queryFun() {
      this.query.pageNo = 1;
      this.getList(this.query);
    },
    // 清空按钮
    emptyFun() {
      this.$refs["query"].resetFields();
      this.query.pageNo = 1;
      this.getList(this.query);
    },
    //  导出
    exportDept() {
      let fileParmas = this.query;
      delete fileParmas.pageNo;
      delete fileParmas.pagesize;
      expotOut(
        "get",
        "/sys/agentInvite/exportUser",
        fileParmas, // 导出请求参数
        "全面经纪人邀请" // 导出文件名字
      );
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList(cpage);
    },
    handleSizeChange(psize) {
      this.query.pageNo = psize;
      this.getList(psize);
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep .el-table td
{
    padding: 10px 0;
}
::v-deep .el-table th
{
    padding: 10px 0;
}
::v-deep .el-form--inline .el-form-item__content
{
    line-height: 32px;  width: 210px;
}
::v-deep .el-input__inner
{
    height: 32px;
}
::v-deep .el-input__icon
{
    line-height: 32px;
}
::v-deep .button .el-button
{
    line-height: 0;  width: 80px;  height: 32px;
}
::v-deep .el-table th > .cell
{
    font-size: 14px;  font-weight: bold;  color: #333;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td
{
    background: rgba(59, 157, 248, .1);
}
.main
{
    position: relative;  padding-bottom: 50px;
}
::v-deep .el-pagination
{
    position: absolute;  right: 0;  margin-top: 20px;
}
::v-deep .el-pagination__total
{
    visibility: hidden;
}
.title
{
    font-family: Microsoft YaHei;  font-size: 12px;  font-weight: 400;  line-height: 21px;  position: absolute;  top: 20px;  left: 0;  color: rgba(51, 51, 51, 1);
}



</style>
